<template>
  <div id="detail-box">
    <div id="show-box">
      <span>账号： {{ currentUser.userId }}</span>
      <span>用户名： {{ currentUser.userName }}</span>
    </div>
    <div>
      <el-button type="primary" @click="modifyUsername">修改用户名</el-button>
      <el-button type="primary" @click="modifyPassword">修改密码</el-button>
    </div>
  </div>
</template>
<script>

import {mapState} from "vuex";

export default {
  name: "DetailShow",
  computed: {
    ...mapState(['currentUser']),
  },
  data() {
    return {}
  },
  methods: {
    modifyUsername() {
      this.$router.push({name: 'UsernameModify'});
    },
    modifyPassword() {
      this.$router.push({name: 'PasswordModify'});
    }
  },
}
</script>

<style scoped>
#detail-box {
  display: flex;
  flex-direction: column;
  justify-content: center;

  * {
    margin: 8px;
  }
}

#show-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>